<template>
    <div>
        <div class="rankContainer">
            <!-- 排行分类 -->
            <div class="rankIfy">
                <div class="rankTitle">
                    <a
                        :class="currentTitle === name ? 'active' : ''"
                        v-for="(name, index) in rankName"
                        :key="index"
                        @click="changeTitle(index)"
                    >{{ name }}</a>
                </div>
                <ul class="rankList">
                    <li
                        :class="['rankItem', currentRank === rank.name ? 'active' : '']"
                        v-for="(rank, index) in rankList"
                        :key="rank.id"
                        @click="changeRank(index, rank.id)"
                    >
                        <img :src="rank.coverImgUrl" :alt="rank.description" />
                        <div class="rankInfo">
                            <h3>{{ rank.name }}</h3>
                            <p>{{ rank.updateFrequency }}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 歌曲列表 -->
            <div class="rankDetail">
                <div class="rankName">
                    <h1>{{ songInfo.titleName }}</h1>
                    <div>更新时间：{{ songInfo.titleTime }}</div>
                </div>
                <div class="songOperator">
                    <button>
                        <i class="iconfont icon-24gl-play"></i>
                        <span>全部播放</span>
                    </button>
                    <button>
                        <i class="iconfont icon-zengjia"></i>
                        <span>添加</span>
                    </button>
                    <button>
                        <i class="iconfont icon-xianxingtubiaozhizuomoban-30"></i>
                        <span>收藏</span>
                    </button>
                    <button>
                        <i class="iconfont icon-pinglun"></i>
                        <span>评论</span>
                    </button>
                </div>
                <table class="songItem" border="0">
                    <tr class="songTitle">
                        <th>序号</th>
                        <th>歌曲</th>
                        <th>歌手</th>
                        <th>时长</th>
                    </tr>
                    <tr
                        class="songInfo"
                        v-for="(song, index) in pageSongList"
                        :key="index"
                        @click="playSong(song.id)"
                    >
                        <td class="songImg">
                            <div>{{ index + 1 }}</div>
                            <img :src="song.picUrl" alt />
                        </td>
                        <td>
                            <div>{{ song.songName }}</div>
                        </td>
                        <td>
                            <div>{{ song.singer }}</div>
                        </td>
                        <td>
                            <div>{{ song.songTime }}</div>
                        </td>
                    </tr>
                </table>
                <!-- 分页器 -->
                <div class="rankPagination" v-if="songInfo.songList">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="songInfo.songList.length"
                        :current-page="currentPage"
                        @current-change="pageChange"
                    ></el-pagination>
                </div>
                <div class="rankComment">
                    <h1>精彩评论</h1>
                    <div class="newComment" v-for="info in commentList" :key="info.commentId">
                        <img :src="info.picUrl" alt />
                        <div class="commentInfo">
                            <span class="commentName">{{ info.nickname }}：</span>
                            <span>{{ info.content }}</span>
                            <div class="commentTime">{{ info.time }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getRankList, getSongList, getCommentList } from "../../api/rank";
import * as dayjs from "dayjs";
export default {
    name: "Rank",
    components: {},
    data() {
        return {
            //总类名称
            rankName: ["官方", "特色", "全球"],
            //当前总类名称
            currentTitle: "",
            //当前排行名
            currentRank: "",
            //当前页码
            currentPage: 1,
            //所有排行
            allRankList: [],
            //各总类名称下的排行
            rankList: [],
            //各排行歌曲信息和列表
            songInfo: {},
            //渲染歌曲列表
            pageSongList: [],
            //评论数据
            commentList: [],
        };
    },
    methods: {
        //切换总类名称并获取各总类名称下的排行
        async changeTitle(index) {
            this.currentTitle = this.rankName[index];
            if (index === 0) {
                this.rankList = this.allRankList.slice(0, 4);
            }
            if (index === 1) {
                this.rankList = this.allRankList.slice(5, 9);
            }
            if (index === 2) {
                this.rankList = this.allRankList.slice(9, 13);
            }
            this.currentRank = this.rankList[0].name;
            await this.getSongsList(this.rankList[0].id);
            await this.getCommentsList(this.rankList[0].id);
        },
        //获取各排行歌曲信息和列表和渲染歌曲列表
        async getSongsList(id) {
            const result = await getSongList(id);
            const songInfo = {
                titleName: result.playlist.name,
                titleTime: dayjs(result.playlist.updateTime).format("YYYY-MM-DD"),
                songList: result.playlist.tracks.map((item) => {
                    return {
                        songName: item.al.name,
                        songTime: dayjs(item.dt).format("mm:ss"),
                        picUrl: item.al.picUrl,
                        singer: item.ar[0].name,
                    };
                }),
            };
            this.songInfo = songInfo;
            if (this.currentPage === 1) {
                this.pageSongList = this.songInfo.songList.slice(0, 10);
            } else {
                this.pageSongList = this.songInfo.songList.slice(
                    (this.currentPage + 1) * 9 - 9,
                    (this.currentPage + 1) * 9 + 1
                );
            }
        },
        //切换排行类别
        async changeRank(index, id) {
            this.currentRank = this.rankList[index].name;
            await this.getSongsList(id);
            await this.getCommentsList(id);
        },
        //切换当前页码
        pageChange(newPage) {
            this.currentPage = newPage;
            const result = this.rankList.find((item) => {
                return item.name === this.currentRank;
            });
            this.getSongsList(result.id);
        },
        //获取评论信息
        async getCommentsList(id) {
            const res = await getCommentList(id);
            const commentList = res.comments.map((item) => {
                return {
                    id: item.commentId,
                    content: item.content,
                    time: item.timeStr,
                    nickname: item.user.nickname,
                    picUrl: item.user.avatarUrl,
                };
            });
            this.commentList = commentList;
        },
    },

    computed: {},
    watch: {},
    async mounted() {
        //请求所有排行列表
        const result = await getRankList();
        this.allRankList = result.list;
        //默认总类名称
        this.currentTitle = this.rankName[0];
        //默认总类名称下的排行列表
        this.rankList = this.allRankList.slice(0, 4);
        //默认总类名称下的排行名称
        this.currentRank = this.rankList[0].name;
        //请求选中排行的歌曲
        await this.getSongsList(this.rankList[0].id);
        await this.getCommentsList(this.rankList[0].id);
    },
};
</script>

<style scoped>
/* 排行榜*/
.rankContainer {
    display: flex;
    justify-content: space-between;
}
/* 排行类别 */
.rankIfy {
    width: 250px;
    box-shadow: 0 0 2px 1px rgb(243, 241, 241);
}
.rankTitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #ccc;
}
.rankTitle a {
    cursor: pointer;
}
.rankTitle a.active {
    font-weight: bold;
    border-bottom: 4px solid yellow;
}

.rankItem {
    display: flex;
    align-items: center;
    list-style: none;
    height: 80px;
}
.rankItem.active {
    background-color: #ccc;
}
.rankItem img {
    width: 60px;
    height: 60px;
    padding: 0 20px;
}
.rankInfo {
    font-size: 14px;
}
.rankInfo h3 {
    padding: 5px 0;
}
.rankInfo p {
    color: rgb(116, 112, 112);
}
/* 歌曲列表 */
.rankDetail {
    width: 76%;
}
.rankName h1 {
    padding: 10px 0;
}
.songOperator {
    display: flex;
    align-items: center;
    padding: 30px 0;
}
.songOperator button:first-child {
    width: 150px;
    height: 50px;
    background-color: #ffe12c;
}
.songOperator button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    margin-right: 30px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
}
.songOperator button .iconfont {
    padding-right: 10px;
}
.songItem {
    border-collapse: collapse;
}
.songTitle th {
    text-align: left;
    padding-left: 30px;
    width: 250px;
    height: 46px;
    background-color: #fafafa;
}
.songInfo {
    height: 70px;
}
.songInfo:nth-child(odd) {
    background-color: #fafafa;
}
.songInfo:hover {
    background-color: #f2f2f2;
}
.songInfo td {
    width: 200px;
    line-height: 70px;
    padding-left: 30px;
}
.songInfo td div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    width: 200px;
}

.songInfo .songImg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}
.songInfo .songImg div {
    padding-left: 30px;
}
.songInfo .songImg img {
    width: 54px;
    height: 54px;
    padding-right: 30px;
}
.rankPagination {
    width: 100%;
    padding: 30px 0;
    text-align: center;
}
.rankComment h1 {
    padding: 20px 0;
}
.newComment {
    display: flex;
    align-items: center;
    height: 75px;
    border-bottom: 1px solid #ccc;
}
.newComment img {
    width: 35px;
    height: 35px;
    margin-right: 30px;
    border-radius: 50%;
}
.commentName {
    color: skyblue;
    cursor: pointer;
}
.commentTime {
    color: #ccc;
    padding-top: 5px;
}
</style>